<template>
	<el-col :span="24" class="box">
		<el-col :span="24" class="box-header">员工工作状态</el-col>
		<full-calendar class="col-red" :events="fcEvents" first-day='1' @changeMonth="fnChangeMonth" @dayClick="fnDayClick">
	    </full-calendar>
	    
	    <el-button class="btn-back" @click="emitGoBack">返回</el-button>
	    
		<!--创建工作状态-->
		<el-dialog title="创建工作状态" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="工作状态">
				  	<el-radio v-model="addForm.Status" label="0">在岗</el-radio>
  					<el-radio v-model="addForm.Status" label="1">外出</el-radio>
  					<el-radio v-model="addForm.Status" label="2">休假</el-radio>
				</el-form-item>
				<el-form-item label="开始日期" prop="Start">
				    <el-date-picker v-model="addForm.Start" type="date" placeholder="开始日期" formate="yyyy-MM-dd" @change="fnGetStart"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束日期" prop="End">
				    <el-date-picker v-model="addForm.End" type="date" placeholder="结束日期" formate="yyyy-MM-dd" @change="fnGetEnd"></el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnAddWorkFlow">提交</el-button>
			</div>
		</el-dialog>
	</el-col>
</template>

<script>
    import Svc from '../../service/index.js'
    import FullCalendar from '../../components/fullcalendar/fullCalendar.vue'
	import moment from 'moment'
	export default {
		props:['staff-id'],
		data() {
			return {
            	fcEvents : [],
				//新增内容
				addForm : {
					Status : "0",
					Start:'',
					End:''
				},
				addFormVisible : false,
				addFormRules:{},
				month : { //当前选择月份的第一天及最后一天
					start : '',
					end : ''
				}
			}
		},
		components:{
			'full-calendar' : FullCalendar
		},
		methods: {
			//自定义事件->跳转到我的申请列表
			emitGoBack(){
				this.$emit('go-back','staff-detail')
			},
        	//显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //获取开始日期
			fnGetStart(val){
				this.addForm.Start = val
			},
			//获取结束日期
			fnGetEnd(val){
				this.addForm.End = val
			},
			//切换月份
			fnChangeMonth(start, end){
				this.month.start = start
				this.month.end = end
				this.fnGetWorkFlow(start, end)
			},
            //打开创建工作状态页面
		    fnDayClick(day, jsEvent) {
		    	var that = this
		    	that.addFormVisible = true
		    	that.addForm.Start = new Date(day)
		    	that.addForm.End = new Date(day)
		    },
		    //创建工作状态
		    fnAddWorkFlow(){
		    	var that = this
		        that.$refs.addForm.validate((valid) => {
		          if (valid) {
		          		var params = {
		          			EmpID : that.staffId,
		          			Status : parseInt(that.addForm.Status),
							Start: moment(that.addForm.Start).format('YYYY-MM-DD'),
							End:moment(that.addForm.End).format('YYYY-MM-DD')
		          		}
		          		//参数设置
			            Svc.fnPostData('/api/account/emp/setcalendar',params,function(res){
			            	if (res.body.ErrCode == 0){
			            		that.addFormVisible = false
			            		that.openMessage("工作状态创建成功！",'success')
			            		that.fnGetWorkFlow(that.month.start,that.month.end)
			            	} else {
			            		that.openMessage(res.body.ErrMsg,'error')
			            	}
			            },function(res){
			            	that.openMessage("网络错误，请重新！",'error')
			            })
		          	} else {
			            return false;
			        }
		        });
		    },
		    //获取工作状态
		    fnGetWorkFlow(start, end){
		    	var that = this
		    	var params = {
		    		EmpID : that.staffId,
	    			Start:start,
					End:end
		    	}
	            Svc.fnPostData('/api/account/emp/getcalendar',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.fcEvents = res.body.Data
	            	} else {
	            		that.openMessage("当月工作状态获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
				})
			}
		}
	}

</script>

<style scoped>
	.box {
		background-color: #fff;
   		box-sizing: border-box;
   		background: #fff;
    	border: 1px solid #d1dbe5;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
		margin-top: 20px;
	}

	.box-header{
		background-color: #eef1f6;
	    border-bottom: 1px solid #d1dbe5;
	    padding: 10px;
	    margin-bottom: 24px;
	    font-size: 15px;
	    color: #48576a;
	}
	
	.btn-back{
    	margin: 20px 0 20px 18%;
	}
</style>